<template>
		<div class="container">
			<!-- 搜索框 -->
			<van-sticky>
					<van-search @click="toregister"
					v-model="searchVal" 
					placeholder="请输入搜索商品关键词" 
					input-align="center"
					background="#FFFFFF"
					disabled
					/>
					<!-- 轮播图 -->
					<van-tabs v-model="tabVal" title-active-color="#07c160" color="#4ABF5C" duration="0.2" >
					  <van-tab @click="getCatIdName" :name="item.cat_id" v-for="item in navList" :key="item.cat_id" :title="item.cat_name">
					  </van-tab>
					</van-tabs>
			</van-sticky>
			
			<home-content v-if="tabVal == '0000'"></home-content>
			<other-content v-else :cat-id="catId" :cat-name="catName"></other-content>
		</div>
</template>

<script>
	
	import HomeContent from '../components/home-content.vue'
	import OtherContent from '../components/other-content.vue'
	
	
	export default {
		data(){
			return {
				searchVal : '',
				tabVal : '',
				
				catId : '',
				catName : '',
				
				navList : [],
			}
		},
		methods : {
			toregister(){
				this.$router.push('/register');
			},
			//获取导航分类名称
			getCatIdName(name, title){
				//(默认传参为name == catID和title == 家居)
				this.catId = name;
				this.catName = title;
			}
		},
		created(){
			// 页面加载时,请求后台数据
			this.axios.get('/api_cat').then((result) => {
				let {data} = result;
				if(data.code != 0){
					console.log('首页分类请求失败');
					return;
				};
				console.log(data); 
				return data;
			}).then((val) => {
				val.data.unshift({'cat_id' : '0000', 'cat_name' : '首页'});
				
				this.navList =val.data
				console.log(val.data);
			})
		},
		components : {
			HomeContent,
			OtherContent,
		},
	}
</script>
<style scoped lang="less">
	.van-tabs{
		padding: 0 12px;
		background-color: #fff;
		height: 50px;
	}
</style>
